import React from 'react';
import './index.css';
import {connect} from 'react-redux';
import {getRank} from '../../store/rank.redux';
import { Skeleton } from 'antd';

@connect((state)=>({
  list:state.rank.list
}),{
  getRank
})
class Rank extends React.Component{
  constructor(props){
    super(props);
    this.state={};
  }
  componentDidMount(){
    this.props.getRank();
  }
  render(){
    return (
      <div className="rank">
        <ul>
            {
               (this.props.list && this.props.list.length>0)?this.props.list.map(song=>{
                return (
                  <a href={'/#/songList/'+song.id} key={song.id}>
                  <li>
                    <p className="ph_img">
                      <img src={song.picUrl} alt=""/>
                      <span className="iconfont icon-erji">{song.listenCount}</span>
                    </p>
                    <div className="ph_song_list">
                      <span className="iconfont icon-you"></span>
                      <h2>{song.title}</h2>
                      {
                        song.songList.map(s=>{
                          return (
                            <p key={s.number}>
                              {s.number}
                              <span>{s.songName}</span> -{s.singerName}
                            </p>
                          )
                        })
                      }
                  </div>
                </li>
                </a>
                )
              }) : 
              // <div style={{'textAlign':'center','lineHeight':'100px'}}><Spin indicator={antIcon} /></div>
              <div>
                <Skeleton avatar paragraph={{ rows: 4 }} active/>
                <Skeleton avatar paragraph={{ rows: 4 }} active/>
                <Skeleton avatar paragraph={{ rows: 4 }} active/>
                <Skeleton avatar paragraph={{ rows: 4 }} active/>
                <Skeleton avatar paragraph={{ rows: 4 }} active/>
              </div>
            }
        </ul>
      </div>)
  }
}

export default Rank;